<template>
	<div class="app-container">

		<div class="info-content">
			<div class="el-card__header">更新信息</div>
			<div class="el-card__body">
				<el-row class="form">
					<el-col :span="6">
						<el-form ref="form" :model="form" :rules="rules" label-width="80px">
							<el-form-item label="账号">
								<el-input v-model="username" disabled></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input type="password" v-model="form.password"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit" icon="el-icon-position"
									class="lgm-search-btn">更新个人信息</el-button>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		personalAdmin,
		change_store,
		platformPlatform
	} from "@/api/admin";
	import {
		getToken
	} from '@/utils/auth';

	let loadingInstance = null;
	import {
		Loading
	} from 'element-ui';
	export default {
		data() {
			return {
				headers: {
					Authorization: `Bearer ${getToken()}`
				},
				username: "",
				form: {
					admin_id: "",
					avatar: "",
					nickname: "",
					role_id: "",
					role_name: "",
					store_id: "",
				},
				store_info: {},
				store_list: [],
				rules: {},
			};
		},
		created() {
			this.username = localStorage.getItem('username')
			this.personalFn();
		},
		methods: {
			change_storeFn(store_id) {
				change_store({
						store_id,
					},
					"POST"
				).then((e) => {
					this.personalFn();
				});
			},
			beforeUpload() {
				// 显示 loading
				loadingInstance = Loading.service({
					text: "上传...",
					background: "rgba(0, 0, 0, 0.7)", // 自定义 loading 背景色
				});
			},
			handleAvatarSuccess(res, file) {
				if (loadingInstance) {
					loadingInstance.close(); // 隐藏 loading
				}
				this.form.avatar = res.data;
			},
			personalFn() {
				personalAdmin({}, "GET").then((e) => {
					this.form = e.data;

				});
			},
			onSubmit() {
				platformPlatform({
					password: this.form.password,
				}, "POST").then((e) => {
					this.$message("submit!");
				});

			},
			onCancel() {
				this.$message({
					message: "cancel!",
					type: "warning",
				});
			},
		},
	};
</script>

<style scoped>
	.info-content {
		background-color: #fff;
		margin-bottom: 15px;
	}

	.form {
		display: flex;
		justify-content: center;
	}

	.avatar-wrap {
		display: flex;

		.avatar-btn {
			width: 115px;
		}

		.avatar-input {
			flex: 1;
		}
	}

	.el-card__body {
		.item {
			font-size: 18px;
			margin-bottom: 12px;

			.span {
				color: #909399;
			}
		}

		.line-2 {
			display: flex;

			p {
				width: 33%;
			}
		}

		.line-3 {
			display: flex;
			align-items: center;

			.company-name {
				width: 45%;
			}

			.btn {
				width: 45%;
			}
		}
	}

	.code-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.left-p {
			margin-top: 30px;
		}

		.right-p {
			margin: 6px 0;
		}
	}
</style>